import { ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Row,
  Col,
  Switch,
  Radio,
  Space,
  message,
  Popconfirm,
} from "antd";
import {
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
  useEffect,
} from "react";
import styles from "./styles.less";
const { TextArea } = Input;
import { namespace } from "./configFile";

export default forwardRef((props, ref) => {
  const { dispatch, typeData } = props;
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();

  useEffect(() => {
    queryTable();
  }, []);

  const queryTable = () => {
    dispatch({ type: `${namespace}/queryTypeTable` });
  };

  const onChange = ({ status, id }) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params: {
        status: status === "0" ? "1" : "0",
        id,
      },
      callback: () => {
        tableRef.current?.reload();
      },
    });
  };

  const onDelete = (id) => {
    dispatch({
      type: `${namespace}/deleteItem`,
      params: {
        id,
      },
      callback: () => {
        tableRef.current?.reload();
      },
    });
  };

  const columns = [
    {
      title: "类型名称",
      dataIndex: "salaryTypeName",
    },
    {
      title: "计算方式",
      dataIndex: "countMethod",
      valueEnum: {
        1: { text: "加项" },
        2: { text: "减项" },
      },
    },
    {
      title: "备注",
      dataIndex: "remark",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (_, row) => (
        <Switch checked={_ === "0"} onChange={() => onChange(row)} />
      ),
    },
    {
      title: "操作",
      fixed: "right",
      dataIndex: "id",
      align: "center",
      render: (_, record) => {
        return (
          <Popconfirm
            title="确定要删除当前项吗?"
            onConfirm={() => {
              onDelete(_);
            }}
          >
            <Button type="link">删除</Button>
          </Popconfirm>
        );
      },
    },
  ];

  const submitForm = async () => {
    const params = await form.validateFields();
    dispatch({
      type: `${namespace}/submitItem`,
      params,
      callback: () => {
        tableRef.current?.reload();
      },
    });
  };

  useImperativeHandle(ref, () => ({
    setOpen,
  }));

  return (
    <Modal
      open={open}
      title="新增工资类型"
      forceRender
      width={800}
      onCancel={() => {
        form.resetFields();
        setOpen(false);
      }}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 3 }}>
        <Row gutter={8}>
          <Col span={24}>
            <Form.Item
              label="类型名称"
              name="salaryTypeName"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          </Col>

          <Col span={24}>
            <Form.Item
              label="计算方式"
              name="countMethod"
              rules={[{ required: true }]}
            >
              <Radio.Group>
                <Radio value="1">加项</Radio>
                <Radio value="2">减项</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>

          <Col span={24}>
            <Form.Item label="备注" name="remark">
              <TextArea />
            </Form.Item>
          </Col>

          <Col span={19} offset={3}>
            <Form.Item label="">
              <Button type="primary" onClick={submitForm}>
                添加
              </Button>
            </Form.Item>
          </Col>
          <Col span={23} offset={1}>
            <ProTable
              search={false}
              actionRef={tableRef}
              scroll={{ x: 1500, y: 150 }}
              pagination={{
                showSizeChanger: true,
              }}
              request={async (params) => {
                return await dispatch({
                  type: `${namespace}/querySalaryTypeList`,
                  params,
                });
              }}
              columns={columns}
            />
          </Col>
        </Row>
      </Form>
    </Modal>
  );
});

// export default Dom
